<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/mobile-header.jsp"%>
<!DOCTYPE html>
<html style="overflow-x:hidden;overflow-y:auto;"><head>
<title>邯郸微购物</title>		
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">        
<!-- Mobile Devices Support @begin -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- apple devices fullscreen -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/site/themes/JiaoYuMuBan/common.css" media="all">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/site/themes/JiaoYuMuBan/home-19.css" media="all">	
<script type="text/javascript" src="${ctxStatic}/site/themes/JiaoYuMuBan/jQuery.js"></script>
<script type="text/javascript" src="${ctxStatic}/site/themes/JiaoYuMuBan/swipe.js"></script>
</head>
<body>
<div class="body">
   <div style="-webkit-transform:translate3d(0,0,0);">
		<div style="visibility: visible;" id="banner_box" class="box_swipe">
			<ul style="list-style: none outside none; width: 2560px; transition-duration: 500ms; transform: translate3d(-640px, 0px, 0px);">
			 <c:if test="${config.pic1!=null}">
             <li style="width: 640px; display: table-cell; vertical-align: top;">
                <a onclick="return false;">
                  <img src="${ctxUser}/shopping/${config.pic1}" style="width:100%;">
                </a>
             </li>
             </c:if>
             <c:if test="${config.pic2 != null}">
             <li style="width: 640px; display: table-cell; vertical-align: top;">
                <a onclick="return false;">
                  <img src="${ctxUser}/shopping/${config.pic2 }" style="width:100%;">
                </a>
             </li>
              </c:if>
               <c:if test="${config.pic3 != null}">
             <li style="width: 640px; display: table-cell; vertical-align: top;">
                <a onclick="return false;">
                  <img src="${ctxUser}/shopping/${config.pic3 }"style="width:100%;">
                </a>
             </li>		
             </c:if>
              <c:if test="${config.pic4 != null}">		
             <li style="width: 640px; display: table-cell; vertical-align: top;">
                <a onclick="return false;">
                  <img src="${ctxUser}/shopping/${config.pic4 }"  style="width:100%;"> 
                </a>
             </li>		
             </c:if>		
		   </ul>
			<ol>
			 <c:if test="${config.pic1 != null}">	
              <li class=""></li>
			 	</c:if>
			 	<c:if test="${config.pic2 != null}">	
              <li class="on"></li>
			 	</c:if>
			 	<c:if test="${config.pic3 != null}">
              <li class=""></li>
			 	</c:if>
			 	<c:if test="${config.pic4 != null}">	
              <li class=""></li>
			 	</c:if>
			</ol>
		</div>
	</div>
  <script>
      $(function(){
          new Swipe(document.getElementById('banner_box'), {
              speed:500,
              auto:3000,
              callback: function(){
                  var lis = $(this.element).next("ol").children();
                  lis.removeClass("on").eq(this.index).addClass("on");
              }
          });
      });
  </script>
   <section>
	<ul class="list_ul">
		<c:forEach items="${categoryList }" var="category">
          <li>
            <a href="${ctxFront }/shopping/product?category=${category.value }&uid=${uid}&wechatId=${wechatId}">
               <figure>
                <img src="${ctxUser }/shopping/${category.icon }" alt="" class="img-circle">
                <figcaption style="height:33px; overflow:hidden;">${category.name }</figcaption>
               </figure>
             </a>
         </li>
		</c:forEach>
        </ul>
	</section>
         <footer>
            <div class="footer">
                <a href="">技术支持：智讯互联</a>
            </div>
        </footer>
   </div>          
</body>
</html>
